<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import { onMounted } from "vue";
import { Ion, Viewer } from "cesium";
// import { useStore } from "vuex";

Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNThmOGZlYy0yMWRhLTQ1Y2QtOWEzYy1kZDc1OTdkMDFiZmUiLCJpZCI6ODg0MjQsImlhdCI6MTY2OTUxNjY0N30.EnNjIANE_y4A1mB2PjYdWQJ5iqGqgztwUdV7blYGcNo";

export default {
  name: "ViewerTest",
  setup() {
    // const store = useStore();
    onMounted(() => {
      const viewer = new Viewer("cesiumContainer", {
        animation: true, //创建动画小控件，即左下角的仪表
        baseLayerPicker: true, //图层选择器
        fullscreenButton: true, //全屏按钮
        vrButton: true, //vr按钮，默认值为false
        geocoder: true, //Geocoder(右上角的查询按钮)
        homeButton: true, //Home按钮
        sceneModePicker: true, //三维地球/二维地图选择器
        timeline: true, //时间线
        navigationHelpButton: true, // 导航帮助按钮
        navigationInstructionsInitiallyVisible: false, //默认值为true,初始化前不显示导航说明
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.map{
    width: 100vw;
}

  #cesiumContainer {
    // width: 100vw;
    margin: 0;
    padding: 0;
  }

</style>